<template>
  <div id="supervisionInformation" class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="施工单位" name="first">
        <div class="top_input">
          <div>
            施工片块：
            <el-select v-model="value" placeholder="全部">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div>
            开始时间：
            <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
          </div>
          <div>
            截止时间：
            <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
          </div>
          <div>
            <el-button type="primary">查询</el-button>
          </div>
        </div>
        <div class="zonghe_table">
          <!-- <div>施工前、施工后列表</div> -->
          <div style="margin:30px 20px 10px 20px;">施工前</div>
          <el-table :data="shigongList" style="width: 100%" v-loading="isSgqLoading">
            <el-table-column type="index" show-overflow-tooltip label="序号"></el-table-column>
            <el-table-column prop="landName" label="施工片块"></el-table-column>
            <el-table-column prop="startTime" label="施工时间"></el-table-column>
            <el-table-column prop="sgqPlace" label="施工位置"></el-table-column>
            <el-table-column prop label="施工状态">
              <template slot-scope="scope">
                <span v-if="scope.row.sghPlace">施工后</span>
                <span v-else>施工前</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="logDetail" label="施工日志"></el-table-column> -->
            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <!-- <template> -->
                <el-button size="mini" type="primary" @click="btnShigong(scope.row,1)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination
              @size-change="showTotal"
              @current-change="showPage"
              :current-page="needInfo.page"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="needInfo.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage1"
            ></el-pagination>
          </div>
          <div style="margin:30px 20px 10px 20px;">施工中</div>
          <el-table :data="shigongzhongList" style="width: 100%" v-loading="isSgzLoading">
            <el-table-column type="index" show-overflow-tooltip label="序号"></el-table-column>
            <el-table-column prop="landName" label="施工片块"></el-table-column>
            <el-table-column prop="time" label="施工时间"></el-table-column>
            <el-table-column prop="place" label="施工位置"></el-table-column>
            <el-table-column prop label="施工状态">
              <template>
                <span>施工中</span>
              </template>
            </el-table-column>
            <el-table-column prop="logDetail" label="施工日志"></el-table-column>
            <el-table-column label="操作" fixed="right">
              <!--  <template slot-scope="scope"> -->
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="btnShigong(scope.row,2)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination
              @size-change="showTotal2"
              @current-change="showPage2"
              :current-page="needInfo2.page"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="needInfo2.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage2"
            ></el-pagination>
          </div>
          <div style="margin:30px 20px 10px 20px;">施工后</div>
          <el-table :data="shigonghouList" style="width: 100%" v-loading="isSghLoading">
            <el-table-column type="index" show-overflow-tooltip label="序号"></el-table-column>
            <el-table-column prop="landName" label="施工片块"></el-table-column>
            <el-table-column prop="time" label="施工时间"></el-table-column>
            <el-table-column prop="place" label="施工位置"></el-table-column>
            <el-table-column prop label="施工状态">
              <template>
                <span>施工后</span>
              </template>
            </el-table-column>
            <el-table-column prop="logDetail" label="施工日志"></el-table-column>
            <el-table-column label="操作" fixed="right">
              <!--  <template slot-scope="scope"> -->
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="btnShigong(scope.row,3)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination
              @size-change="showTotal3"
              @current-change="showPage3"
              :current-page="needInfo3.page"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="needInfo3.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage3"
            ></el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="监管单位" name="second">
        <div class="top_input">
          <div>
            监理片块：
            <el-select v-model="jianliValue" placeholder="全部">
              <el-option
                v-for="item in jianliInfo"
                :key="item.landId"
                :label="item.landName"
                :value="item.landId"
              ></el-option>
            </el-select>
          </div>
          <div>
            开始时间：
            <el-date-picker
              v-model="jianliStarTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              @blur="getJianliInfo"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </div>
          <div>
            截止时间：
            <el-date-picker
              v-model="jianliEndTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              @blur="getJianliInfo"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </div>
          <div>
            <el-button type="primary" @click="btnJianliSearch">查询</el-button>
          </div>
        </div>
        <div class="zonghe_table">
          <el-table :data="jianliInfo" style="width: 100%">
            <el-table-column type="index" show-overflow-tooltip label="序号"></el-table-column>
            <el-table-column prop="landName" label="监理片块"></el-table-column>
            <el-table-column prop="time" label="监理时间"></el-table-column>
            <el-table-column prop="place" label="监理位置"></el-table-column>
            <el-table-column prop="logDetail" label="监理日志"></el-table-column>
            <el-table-column label="操作" fixed="right">
              <!--   -->
              <template slot-scope="scope">
                <!-- <el-button size="mini" type="primary" @click="btnJianli(scope.row,4)">查看</el-button> -->
                <el-button size="mini" type="primary" @click="btnShigong(scope.row,4)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pages">
          <el-pagination
            @size-change="showTotal1"
            @current-change="showPage1"
            :current-page="needInfo1.page"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="needInfo1.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage1"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  shigongInfo,
  jianliInfo,
  jianliDetailInfo,
  shigongzhongInfo,
  shigongAfterDetail,
  shigongBeforeDetail,
  constructingSuperviseInfo,
  constructingLaterSupervisingInfo,
  constructingConstructSupervisingCheck
} from "@/api/projectImplementation";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      activeName: "first",
      textarea: "",
      options: [
        {
          value: "0",
          label: "全部"
        },
        {
          value: "1",
          label: "莲花村片区片块7-1"
        },
        {
          value: "2",
          label: "莲花村片区片块7-2"
        },
        {
          value: "3",
          label: "莲花村片区片块7-3"
        }
      ],
      value: "",
      value1: "",

      jianliValue: "",
      jianliStarTime: "",
      jianliEndTime: "",

      shigonghouList: [], //施工后数组
      shigongzhongList: [],
      currentPage4: 4,
      needInfo: {
        page: 1,
        size: 5
      },
      shigongList: [], //项目施工
      totalPage: 0,
      jianliInfo: [], //监理信息
      needInfo1: {
        page: 1,
        size: 5
      },
      needInfo2: {
        page: 1,
        size: 5
      },
      needInfo3: {
        page: 1,
        size: 5
      },
      totalPage1: 0,
      totalPage2: 0,
      totalPage3: 0
    };
  },
  created() {
    this.getShigongInfo();
    this.getJianliInfo();
    this.getShigongzhong(); //获取施工中
    this.getShigonghou();
  },
  methods: {
    
    btnShigong(row, type) {
      console.log(row,'1111111')
      this.$router.push({
        path: "/projectImplementation/supervisionInformation/detail",
        query: {
          type: type,
          id: row.landId,
          vcr: row.vcr ? row.vcr : "",
          photo: row.photo ? row.photo : "",
          coorDonate: row.coorDonate,
          landName: row.landName,
          time: row.time ? row.time : "",
          place: row.place ? row.place : "",
          sgqTime:row.startTime?row.startTime:'',
          sgqPlace:row.sgqPlace?row.sgqPlace:'',
          sgzLgit:row.logDetail?row.logDetail:'',
        }
      });
      // this.shigongRowInfo=row
      // this.shigongType=type
      // console.log(this.shigongRowInfo,"施工前中后")
      // console.log(row,'shigong')
      // if(type==1||type==3){
      //   let obj={
      //     landId:row.landId
      //   }
      //   shigongBeforeDetail(obj).then(res=>{
      //     console.log(res,'施工前or施工后')
      //       if(type==1){
      //         if(res.data!=null){
      //           this.mainDataData=res.data
      //           this.shigongBefore=res.data
      //           let arr=[]
      //           if(res.data.sgqPhoto1Path!=null || res.data.sgqPhoto1Path!=''){
      //             arr.push({name:'西北方位照片',path:res.data.sgqPhoto1Path})
      //           }
      //           if(res.data.sgqPhoto2Path!=null||res.data.sgqPhoto2Path!=''){
      //             arr.push({name:'东北方位照片',path:res.data.sgqPhoto2Path})
      //           }
      //           if(res.data.sgqPhoto3Path!=null||res.data.sgqPhoto3Path!=''){
      //             arr.push({name:'东南方位照片',path:res.data.sgqPhoto3Path})
      //           }
      //           if(res.data.sgqPhoto4Path!=null||res.data.sgqPhoto4Path!=''){
      //             arr.push({name:'西南方位照片',path:res.data.sgqPhoto4Path})
      //           }
      //           if(res.data.sgqProspectPath!=null||res.data.sgqProspectPath!=''){
      //             arr.push({name:'360度全景照片',path:res.data.sgqProspectPath})
      //           }

      //           this.imgArr=arr

      //         }
      //       }else{
      //         if(res.data!=null){
      //           this.mainDataData=res.data
      //           this.shigongAfer=res.data
      //           let arr=[]
      //           if(res.data.sghPhoto1Path!=null || res.data.sghPhoto1Path!=''){
      //             arr.push({name:'西北方位照片',path:res.data.sghPhoto1Path})
      //           }
      //           if(res.data.sghPhoto2Path!=null||res.data.sghPhoto2Path!=''){
      //             arr.push({name:'东北方位照片',path:res.data.sghPhoto2Path})
      //           }
      //           if(res.data.sgqPhoto3Path!=null||res.data.sgqPhoto3Path!=''){
      //             arr.push({name:'东南方位照片',path:res.data.sgqPhoto3Path})
      //           }
      //           if(res.data.sghPhoto4Path!=null||res.data.sghPhoto4Path!=''){
      //             arr.push({name:'西南方位照片',path:res.data.sghPhoto4Path})
      //           }
      //           if(res.data.sgqProspectPath!=null||res.data.sgqProspectPath!=''){
      //             arr.push({name:'360度全景照片',path:res.data.sgqProspectPath})
      //           }

      //           this.imgArr=arr

      //         }
      //       }
      //   })
      // }else if(type==2){
      //   let obj={
      //     page:1,
      //     size:99999,
      //     photo:row.photo?row.photo:'',
      //     vcr:row.vcr?row.vcr:''
      //   }
      //   constructingConstructSupervisingCheck(obj).then(res=>{
      //     console.log(res,'施工中')
      //     if(res.data!=null){
      //       this.mainDataData=res.data
      //       this.shigongZhong=res.data
      //       var imageGeShi=["bmp","pcx","png","jpg","jpeg","gif","tiff"]
      //       var videoGeShi=["mp4","avi","flv","rmvb","mkv","gif","mov","rm","3gp"]
      //       var mainList=[]
      //       var mainList1=[]
      //       res.data.rows.forEach((item,index)=>{
      //         imageGeShi.forEach(item1=>{
      //           if(item.fileKey.substring(item.fileKey.indexOf('.')+1,item.fileKey.length)==item1){
      //             mainList.push({name:'施工后图片',path:item.filePath,type:1})
      //           }
      //         })
      //       })
      //       res.data.rows.forEach((item,index)=>{
      //         videoGeShi.forEach(item1=>{
      //           if(item.fileKey.substring(item.fileKey.indexOf('.')+1,item.fileKey.length)==item1){
      //             mainList1.push({name:'施工后视频',path:item.filePath,type:2})
      //           }
      //         })
      //       })
      //       //名称处理
      //       mainList.forEach((item,index)=>{
      //         item.name=item.name+(index!=0?index:'')
      //       })
      //       mainList1.forEach((item,index)=>{
      //         item.name=item.name+(index!=0?index:'')
      //       })

      //       this.imgArrOrVcr=mainList.concat(mainList1)
      //     }
      //   })
      // }
      // this.flag=2
    },
    // toSee(row){
    //   console.log(row)
    //   this.$router.push({
    //     path:'/projectImplementation/supervisionInformation/detail',
    //     query:{
    //       id:row.landId,
    //       vcr:row.vcr?row.vcr:'',
    //       photo:row.photo?row.photo:'',
    //       coorDonate:row.coorDonate,
    //       landName:row.landName,
    //       time:row.time?row.time:'',
    //       place:row.place?row.place:''
    //     }
    //   })
    // },
    btnJianliSearch() {
      let obj = {
        page: this.needInfo.page,
        size: this.needInfo.size,
        projectId: localStorage.getItem("projectId"),
        // projectId:27,
        landId: this.jianliValue,
        startTime: this.jianliStarTime,
        stopTime: this.jianliEndTime
      };
      jianliInfo(obj).then(res => {
        console.log(res, "search");
        this.jianliInfo = res.data.rows;
        this.totalPage1 = res.data.total;
      });
    },
    getShigongzhong() {
      let obj = {
        page: this.needInfo2.page,
        size: this.needInfo2.size,
        projectId: localStorage.getItem("projectId")
      };
      this.isSgzLoading = true;
      constructingSuperviseInfo(obj)
        .then(res => {
          console.log(res, "shigongzhogn");
          this.isSgzLoading = false;
          this.shigongzhongList = res.data.rows;
          this.totalPage2 = res.data.total;
        })
        .catch(error => {
          this.isSgzLoading = false;
        });
    },
    //施工后
    getShigonghou() {
      let obj = {
        page: this.needInfo3.page,
        size: this.needInfo3.size,
        projectId: localStorage.getItem("projectId")
      };
      this.isSghLoading = true;
      constructingLaterSupervisingInfo(obj)
        .then(res => {
          console.log(res, "shigonghou");
          this.this.isSghLoading = false;
          this.shigonghouList = res.data.rows;
          this.totalPage3 = res.data.total;
        })
        .catch(error => {
          this.isSghLoading = false;
        });
    },
    getShigongInfo() {
      //项目实施施工单位
      let obj = {
        page: this.needInfo.page,
        size: this.needInfo.size,
        projectId: localStorage.getItem("projectId")
        // projectId:27,
      };
      this.isSgqLoading = true;
      shigongInfo(obj)
        .then(res => {
          this.isSgqLoading = false;
          console.log(res, "shigongqian");
          this.shigongList = res.data.rows;
          this.totalPage = res.data.total;
        })
        .catch(error => {
          this.isSgqLoading = false;
        });
    },
    getJianliInfo() {
      //项目实施监理单位
      let obj = {
        page: this.needInfo1.page,
        size: this.needInfo1.size,
        projectId: localStorage.getItem("projectId")
        // projectId:27,
      };
      jianliInfo(obj).then(res => {
        console.log(res, "jianli");
        this.jianliInfo = res.data.rows;
        this.totalPage1 = res.data.total;
      });
    },
    showPage(val) {
      console.log(val, "val");
      this.needInfo.page = val;
      this.getShigongInfo();
    },
    showTotal(val) {
      this.needInfo.size = val;
      this.getShigongInfo();
    },
    showPage1(val) {
      console.log(val, "val");
      this.needInfo1.page = val;
      this.getJianliInfo();
    },
    showTotal1(val) {
      this.needInfo1.size = val;
      this.getJianliInfo();
    },
    showPage2(val) {
      console.log(val, "val");
      this.needInfo2.page = val;
      this.getShigongzhong();
    },
    showTotal2(val) {
      this.needInfo2.size = val;
      this.getShigongzhong();
    },
    showPage3(val) {
      console.log(val, "val");
      this.needInfo3.page = val;
      this.getShigonghou();
    },
    showTotal3(val) {
      this.needInfo3.size = val;
      this.getShigonghou();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style>
#supervisionInformation .el-tabs__nav-wrap::after {
  height: 1px;
}
* {
  box-sizing: border-box;
}
.box {
  padding: 30px;
}
.top_input {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #444444;
}
.top_input div {
  margin-right: 20px;
}
.zonghe_table {
  margin: 20px 0px;
}
.pages {
  text-align: center;
  margin: 20px;
}
.seeImg {
  text-align: center;
}
.landInfo {
  border: 1px solid #efefef;
  box-sizing: border-box;
}
.back {
  margin: 20px;
}
.title_one {
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: #444;
  font-weight: bold;
}
.title_little {
  font-size: 13px;
  color: #999;
  margin: 40px 20px 20px 30px;
}
.title .title_little span {
  margin-right: 30px;
}
.project_title {
  background: #f8f8f8;
  height: 50px;
  background: #f8f8f8;
  padding: 0px 30px;
  line-height: 50px;
  color: #48494d;
  font-size: 14px;
  font-weight: bold;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.project_img {
  padding: 30px;
}
</style>
